<template>
  <div class="containerbg">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <div class="menu-table-wrapper">
            <p
              class="boxTitle"
              :class="{ currentMenu: currentCom === 'currentRouteList' }"
              @click="handleComChange('currentRouteList')"
            >
              <span class="word">
                当前路由列表
              </span>
            </p>
            <p
              class="boxTitle"
              :class="{ currentMenu: currentCom === 'newRouteList' }"
              @click="handleComChange('newRouteList')"
            >
              <span class="word">新增路由列表</span>
            </p>
          </div>
          <component :is="currentCom"></component>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import currentRouteList from "@/views/config/routingList/currentRouteList";
import newRouteList from "@/views/config/routingList/newRouteList";

export default {
  components: {
    currentRouteList,
    newRouteList
  },
  data() {
    return {
      currentCom: "currentRouteList"
    };
  },
  methods: {
    handleComChange(comName) {
      this.currentCom = comName;
    }
  }
};
</script>

<style lang="scss" scoped>
.containerbg {
  width: calc(100% - 40px);
  margin: 20px;
}
.box-card {
  width: 100%;
}

.menu-table-wrapper {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  .currentMenu {
    width: 130px;
    height: 40px;
    border: 1px solid #ccc;
    font-size: 16px;
    text-align: center;
    background-color: rgb(64, 158, 255);
    color: #fff;
  }
  .boxTitle {
    width: 130px;
    height: 40px;
    border: 1px solid #ccc;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
  }
  .word {
    text-align: center;
    margin: 0 auto;
    display: block;
    transform: translateY(6px);
  }
}
</style>
